<template>
    <div class="chongzhi_content">
      <jm-head ref="head"></jm-head>
        <van-cell-group title="基本信息">
            <van-cell title="微信昵称" :value="$store.state.userInfo.nickname"/>
            <van-cell title="微信号" :value="$store.state.userInfo.weixin === '' ? '未填写' : $store.state.userInfo.weixin"/>
        </van-cell-group>

          <van-field
            readonly
            clickable
            label="充值方式"
            :value="pay_text"
            placeholder="选择充值方式"
            input-align="right"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
          	show-toolbar
          	:columns="columns"
          	@cancel="showPicker = false"
          	@confirm="onConfirm"
            />
          </van-popup>
          <!-- <van-cell-group title="充值方式">
            <van-cell title="充值方式" value="微信充值"/>
          </van-cell-group> -->
        <van-cell-group title="输入金额(最低可充值1元)">
            <van-cell center title="充值金额" size="larze"  @touchstart.native.stop="show = true">
                <template #right-icon>
                <span v-text="money"></span>&nbsp;<span style="color: #969799;">元</span>
                </template>
            </van-cell>
        </van-cell-group>

        <div class="chongzhi_info box">
            <div class="btns_div box">
                <button class="chongz_btn" @click="payOrder">立即充值</button>
                <p class="box">充值金额最少为1元</p>
                <p class="box">POS、信用卡充值无法提现</p>
                <p class="box">充值如果要提现需要收取0.6%提现手续费；</p>
            </div>
        </div>
        <van-number-keyboard
          v-model="money"
          :show="show"
          :maxlength="60"
          @blur="show = false"
        />
    </div>
</template>
<script>
import Vue from 'vue';
import { payOrder, ybWechatConfigAdd, ybPrePay, tradeOrder } from "@/api/pay"
// import wx from 'weixin-js-sdk';
import { Toast,Cell,CellGroup,Field,Popup,Picker,NumberKeyboard } from 'vant'
import JmHead from '../head/head'

Vue.use(Cell).use(CellGroup).use(Field).use(Popup).use(Picker).use(NumberKeyboard)
    export default {
        name: 'chongzhi',
        components: {
            JmHead
        },
        data () {
            return {
                show: false,
                money: '',
                pay_text:'',
                pay_type:'',
                showPicker: false,
                columns: [
                	//{text:'银行卡充值',type:'BC'},
                	{text:'微信充值',type:'WX'},
                	// {text:'支付宝充值',type:'ALI'},
                	],
            }
        },
        activated(){
            this.$refs.head.setNavBarUrl()
        },
        methods: {
            onConfirm(value) {
              console.log(value);
              this.pay_text = value.text;
              this.pay_type = value.type;
              this.showPicker = false;
            },
            payOrder() {
              let that = this
              let type = that.pay_type

              if (type=='BC'){
              	//后台请求 , 调起用户银行卡支付的返还数据
                      that.bcRecharge();
              }else if(type == "WX"){
              	//后台请求 , 调起用户微信支付的返还数据
              	      that.wxRecharge();
              }else if(type == "ALI"){
              	//后台请求 , 调起用户微信支付的返还数据
              	      that.aliRecharge();
              }else{
                  Toast.fail({message: "请选择充值方式", duration: 2000})
              }





            },
            //银行卡支付
            bcRecharge(){
              tradeOrder({money: this.money, url: location.href.split("#")[0]}).then(res=>{
                  console.log(res);
                  if(res.code === 20000) {
                    window.location.href=res.data
                  } else {
                    Toast.fail({message: res.data.info, duration: 2000})
                  }
              })
            },
            //微信支付
            wxRecharge(){
                const toast = Toast.loading({
                  duration: 0,
                  message: '订单生成中...',
                });

                //原生微信支付
                payOrder({money: this.money, url: location.href}).then(res=>{
                    if(res.code === 20000) {
                      this.pay(res.data, toast)
                    } else {
                      Toast.fail({message: res.data.info, duration: 2000})
                    }
                })
                //ybPrePay({money: this.money, url: location.href.split("#")[0]}).then(res=>{
                //    console.log(res.data.result);
                //    var result = eval("(" + res.data.result.prePayTn + ")")
                //    console.log(result);
                //    if(res.code === 20000) {
                //      this.pay(result, toast, res.data.signature)
                //    } else {
                //      Toast.fail({message: res.data.info, duration: 2000})
                //    }
                //})
            },
            //支付宝支付
            aliRecharge(){

            },
            //前端调起微信支付
            pay(res, toast) {
                toast.clear()
                const that = this
                wx.config({
                  debug: false,
                  appId: res.appid,
                  timestamp: res.timestamp,
                  nonceStr: res.noncestr,
                  signature: res.signature,
                  jsApiList: ['openAddress']
                });

                wx.ready(function() {
                    wx.chooseWXPay({
                      timestamp: res.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                      nonceStr: res.noncestr, // 支付签名随机串，不长于 32 位
                      package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                      signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                      paySign: res.paySign, // 支付签名
                      success: function (res) {
                        // 支付成功后的回调函数
                        that.$router.go(-1);
                      }
                    });
                })
            },
        }
    }
</script>

<style lang="stylus" scoped>
    .chongzhi_content
        width 100%
        height 100vh
        overflow hidden
        background #f5f5f5
        .chongzhi_info
            width 100%
            overflow hidden
            .input_div
                width 100%
                overflow hidden
                border-top 1px solid #eee
                div
                    width 100%
                    display flex
                    display -webkit-flex
                    overflow hidden
                    height .9rem
                    line-height .9rem
                    border-bottom 1px solid #eee
                    background #ffffff
                    padding 0 .3rem
                    label
                        width 25%
                        text-align left
                        color #000
                        display inline-block
                        line-height .9rem
                        font-size .3rem
                    input
                        flex 1
                        -webkit-flex 1
                        border none
                        text-align right
                        display inline-block
                        line-height .9rem
                        font-size .3rem
                        color #000
                        background #fff
                        &::-webkit-input-placeholder
                            color #ccc
                            font-size .28rem
                            text-align left
                    span
                        display inline-block
                .chongzhi_way_div
                    margin-top .3rem
                    .chongzhi_way
                        color #9b9999
                    .chongzhi_money
                        padding 0 .3rem
                        flex none
                        width 42%
                    .jiantou
                        color #9b9999
                        margin-left .2rem
                .chongzhi_money_div
                    margin-top .3rem
                    .zuidi
                        color #747272
                        width 26%
                    .yuan
                        width 7%
                        text-align right
        .btns_div
            width 100%
            overflow hidden
            padding 0 .5rem
            button
                width 100%
                border 1px solid #3385ff
                background #3385ff
                line-height .9rem
                height .9rem
                font-size .36rem
                color #fff
                border-radius 6px
                display block
                text-align center
                margin .5rem 0
            p
                width 100%
                overflow hidden
                position relative
                line-height .4rem
                padding-left .3rem
                margin-bottom .1rem
                color #747272
                font-size .3rem
                &:after
                    content ''
                    position absolute
                    top 50%
                    left 0
                    width .2rem
                    height .2rem
                    background #3385ff
                    border-radius 50%
                    margin-top -.1rem


</style>
